<template>
        <div class="item" @click="handleToggle(lists._id)">
            <div class="head">
                <img :src="lists.avatar" alt="">
                <span>{{lists.date}}</span>
            </div>
            <div class="title">{{lists.title}}</div>
            <img :src="lists.imgSrc" alt="" class="bg">
            <div class="content">{{lists.content}}</div>
            <div class="end">
                <img src="../assets/images/icon/chat1.png" alt="" class="icon">
                <span>{{lists.collectNum}}</span>
                <img src="../assets/images/icon/view.png" alt="" class="icon">
                <span>{{lists.reading}}</span>
                <img :src="lists.collected?collection:collection_anti" alt="" class="icon">
            </div>
        </div>
</template>

<script>
import collection from '../assets/images/icon/collection.png'
import collection_anti from '../assets/images/icon/collection-anti.png'
    export default {
        props:{
            lists:{
                type:Object
            },
            
        },
        data() {
            return {
                collection_anti,collection
            }
        },
        mounted() {
        },
        methods: {
            handleToggle(id){
                this.$router.push(`/articleDetail/${id}`)
            }
        },
    }
</script>

<style>
.head{
    display: flex;
    align-items: center;
    height: 60px;
}
.head img{
    width:50px;
    height: 50px;
}
.head span{
    font-size: 28px;
    margin-left: 40px;
    color:#666;
}
.bg{
    width:100%;
    height: 200px;
}
.icon{
    width:30px;
    height: 30px;
}
.content{
    font-size: 16px;
    margin: 10px 10px;
    color:#666;
}
.title{
    font-size: 20px;
    font-weight: bold;
    color:#333;
    line-height: 60px;
}
.end{
    font-size: 20px;
    display: flex;
    align-items: center;
    height: 50px;
    color:#666;
}
.end span{
    margin:0 20px;
}
.item{
    padding:20px;
    margin-top: 5px;
    background: #fff;
}
</style>